<template>
    <g v-if="isEditAreaShow.value">
        <foreignObject width="100%" height="100%" style="position: relative" @click="click_menu_cover"
            @contextmenu="click_menu_cover">

            <body xmlns="http://www.w3.org/1999/xhtml" :style="get_menu_style()">
                <div class="menu_contain">
                    <span v-show="isEditAreaShow.open_task" @click="openTask">Open Task</span>
                    <span v-show="isEditAreaShow.delete_node" @click="delEdges">Delete Task</span>
                    <span v-show="isEditAreaShow.add_in_port" @click="changePort('in_ports')">Add In Port</span>
                    <span v-show="isEditAreaShow.add_out_port" @click="changePort('out_ports')">Add Out Port</span>
                    <span v-if="isEditAreaShow.detail" @click="editNode">EDIT IT</span>
                    <span v-for="item in isEditAreaShow.rightClickEvent" @click="handlePersonalThs(item.eventName)"
                        :key="item.label">{{ item.label }}</span>
                </div>
            </body>
        </foreignObject>
    </g>
</template>

<script>

export default {
    props: {
        isEditAreaShow: {
            type: Object,
            default: () => {
                return {
                    value: false,
                    x: -9999,
                    y: -9999,
                    id: null
                }
            }
        },
    },
    methods: {
        click_menu_cover(e) {
            this.$emit('close_click_nodes');
            e.preventDefault();
            e.cancelBubble = true;
            e.stopPropagation();
        },
        get_menu_style() {
            let left = this.isEditAreaShow.x;
            let top = this.isEditAreaShow.y;
            return {
                position: "absolute",
                left: left + 'px',
                top: top + 'px',
                width: '120px'
            }
        },
        delEdges() {
            let params = {
                model_id: sessionStorage['newGraph'],
                id: this.isEditAreaShow.id
            };
            this.$emit('delNode', params);
            this.$emit('close_click_nodes')
        },
        openTask() {
            this.$emit("openTask", this.isEditAreaShow)
        },
        changePort(action) {
            this.$emit('changePort', action, this.isEditAreaShow.id)
        },
        editNode() {
            this.$emit('editNodeDetails', this.isEditAreaShow)
        },
        handlePersonalThs(eventName) {
            this.$emit('nodesPersonalEvent', eventName, this.isEditAreaShow.id)
        }
    }
};
</script>

<style scoped>
.connector {
    stroke: hsla(0, 0%, 50%, 0.6);
    stroke-width: 2px;
    fill: none;
}

.menu_cover {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.connector-hl {
    stroke: hsla(0, 0%, 50%, 0.4);
    stroke-width: 5px;
    fill: none;
}
</style>
